<!-- 举报和关注下拉框组件 -->
<!-- 小瓜子 更新于2020.8.18 -->

<!-- 小瓜子 更新于2020/08/29 -->
<!-- 完成举报或删除帖子功能 -->

<!-- 小瓜子 更新于2020/08/30 -->
<!-- 完成删除时无痛刷新 -->
<template>
	<view class="report_and_follow">
		<!-- sdd即show_drop_down -->
		<view class="show_drop_down" ><text class="inxupt inxupttubiao3" @tap.stop="showDropDown"></text></view>
		<view class="drop_down" v-show="dropDownActive">
			<view class="triangle"></view>
			<view class="button" @tap.stop="report" v-show="!mycomment">举报</view>
			<view class="button" @tap.stop="del" v-show="mycomment">删除</view>
		</view>
		<uni-popup ref="popup" type="bottom">
			<uni-popup-report :fromWitch=fromWitch :reportedId="commentId"></uni-popup-report>
		</uni-popup>
	</view>
</template>

<script>
	import UniPopupReport from './plugins/uni-popup/uni-popup-report.vue'
	import UniPopup from './plugins/uni-popup/uni-popup.vue'
	import { _ajax } from '../in-xupt-functions.js'
	export default {
		components: {
			UniPopupReport,
			UniPopup
		},
		data() {
			return {
				dropDownActive: false,
			};
		},
		props:{
			mycomment: {
				type: Boolean,
				default: false
			},
			commentId: {
				type: Number,
				default: 0
			},
			fromSummary: {
				type: Boolean,
				default: false
			},
			fromWitch: {
				type: Number,
				default: undefined
			}
		},
		methods: {
			showDropDown: function () {
				this.dropDownActive = true;
				let timer = setTimeout(()=>{
					this.dropDownActive = false;
				},1000)
			},
			hideDropDown: function () {
				this.dropDownActive = false;
			},
			// 点击举报
			report: function () {
				this.dropDownActive = false;
				this.$refs.popup.open();
			},
			delComment: function() {
				_ajax({
					url: '/comment/' + this.$props.commentId,
					method: 'DELETE'
				}).then(res => {
					if(res.data.status == 0) {
						uni.showToast({
							icon: "none",
							title: "已删除"
						})
						this.dropDownActive = false;
					}else {
						uni.showToast({
							icon: "none",
							title: res.data.msg
						})
						this.dropDownActive = false;
					}
				})
				uni.$emit('deleteComment',{
					commentId: this.$props.commentId,
					rootId: 0
				});
			},
			delPost: function () {
				_ajax({
					url: '/post/' + this.$props.commentId,
					method: 'DELETE'
				}).then(res => {
					if(res.data.status == 0) {
						uni.showToast({
							icon: "success",
							title: "已删除"
						})
						this.dropDownActive = false;
					}else {
						uni.showToast({
							icon: "none",
							title: res.data.msg
						})
						this.dropDownActive = false;
					}
					uni.isRefresh = true;
					// 跳转回帖子详情页或者向上返回一级
					uni.navigateBack({
						animationType: 'slide-out-right',
						animationDuration: 500
					})
				})
			},
			// 点击删除
			del: function () {
				uni.showModal({
					content: '删除后将不能恢复',
					confirmText: '删除',
					cancelText: '取消',
					success: (btn) => {
						if(btn.confirm) {
							let url = '';
							// 如果是从帖子摘要组件中来的，则删除帖子
							if (this.$props.fromSummary){
								this.delPost()
							}else {
								this.delComment()
							}
							
						}
						if(btn.cancel){
							return
						}
					}
				})
				
			}
		}
	}
</script>

<style lang="less">
	.report_and_follow {
		position: relative;
		.drop_down {
			position: absolute;
			top: 60rpx;
			right: 0rpx;
			width: 4rem;
			text-align: center;
			padding: 0 10rpx;
			background-color: #FFFFFF;
			border-radius: 10rpx;
			border-right-top-radius: 0rpx;
			box-shadow: 0rpx 0rpx 20rpx rgba(0,0,0,.2);
			.button {
				line-height: 48rpx;
				border-bottom: 2rpx solid @gray-line;
				padding: 10rpx 0;
			}
			.triangle {
				position: absolute;
				top: -6rpx;
				right: 6rpx;
				width: 20rpx;
				height: 20rpx;
				background-color: #FFFFFF;
				transform: rotate(135deg);
				box-shadow: -3px 3px 5px rgba(0, 0, 0, 0.1);
			}
		}
	}
</style>
